<template>
	<view class="writing" v-if="taskData">
		<view class="special-content">
			<view class="submit-box">
				<view class="title-box">
					<view class="title cut_font">{{ taskData.name }}</view>
					<view class="title-des cut_font">{{ taskData.description }}</view>
				</view>
				<button class="submit" type="primary" @click="handlerSubmit">提交</button>
			</view>
			<!-- <view class="des cut_font_2">{{ taskData.formwork }}</view> -->
		</view>
		<view class="writing-content">
			<input
				class="title"
				type="text"
				v-model="formData.title"
				placeholder-style="color:#CCCCCC;font-size:36rpx;text-align:center;"
				placeholder="标题（小于40字）"/>
			<textarea
				class="content"
				v-model="formData.content"
				:maxlength="10000"
				placeholder-style="color:#CCCCCC;font-size:28rpx;"
				:placeholder="taskData.formwork || '任务模板（最多10000字）'"/>
			<uni-file-picker :auto-upload="false" ref="upload" limit="9" @select="onselect"></uni-file-picker>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			taskData: null,
			formData: {},
			showDetail: false,
			// 跳转来源 anxious: 焦虑树洞
			source: '',
		};
	},
	onLoad({ token, homeworkId, showDetail, source }) {
		if (token) uni.setStorageSync('larsonToken', token);
		this.showDetail = !!showDetail;
		this.source = source || '';
		this.getTaskData(homeworkId);
	},
	methods: {
		getTaskData(id) {
			if (!id) {
				uni.showToast({ title: '书写任务id为空', icon: 'none' });
				return;
			}
			uni.showLoading({
				title: '加载中',
				mask: true,
			});
			uni.$request({
				method: 'GET',
				url: 'app-api/homework/publish/get',
				data: { id },
				header: { 'tenant-id': 1 },
			}).then((res) => {
				this.taskData = res?.data || {};
			}).finally(uni.hideLoading);
		},
		handlerSubmit() {
			if (!this.formData.title) {
				uni.showToast({ title: '请将标题填写完整', icon: 'none' });
				return;
			}
			if (!this.formData.content) {
				uni.showToast({ title: '请将内容填写完整', icon: 'none' });
				return;
			}
			let userInfo = uni.getStorageSync('userInfo') || '{}';
			userInfo = JSON.parse(userInfo);
			uni.showLoading({
				title: '发表中',
				mask: true,
			});
			uni.$request({
				method: 'POST',
				url: 'app-api/homework/write/create',
				data: {
					...userInfo,
					phoneNumber: userInfo.phone,
					homeworkId: this.taskData.id,
					attList: this.$refs.upload.files.filter(({ attachment }) => attachment).map(file => ({
						...file,
						homeworkId: '',
						homeworkWriteId: '',
					})),
					...this.formData,
					orgName: '',
				},
				header: { 'tenant-id': 1 },
			}).then((res) => {
				uni.showToast({ title: '提交成功' });
				if (this.source === 'anxious') {
					window.history.go(-1);
				} else {
					uni.navigateBack();
					if (this.showDetail) {
						setTimeout(() => {
							uni.navigateTo({
								url: `/pages/write/write-detail?type=share&detailId=${res.data}`,
							});
						}, 500);
					}
				}
			}).finally(uni.hideLoading);
		},
		onselect(e) {
			e.tempFiles.forEach(file => {
				const fileUrl = uni.$upLoadfile(file.file, file.cloudPath);
				const index = this.$refs.upload.files.findIndex(({ path }) => path === file.path);
				if (index > -1) this.$refs.upload.files[index].attachment = fileUrl;
			});
		},
	}
};
</script>

<style lang="scss">
	.writing {
		padding: 32rpx;
		font-family: Gen Jyuu Gothic-Regular, Gen Jyuu Gothic;
		font-weight: 400;
		.special-content {
			.submit-box {
				display: flex;
				margin-bottom: 8rpx;
				.title-box {
					width: calc(100% - 140rpx);
					margin-right: 20rpx;
					.title {
						font-size: 32rpx;
						color: #303030;
						line-height: 48rpx;
						margin-bottom: 8rpx;
					}
					.title-des {
						font-size: 28rpx;
						color: #666666;
						line-height: 42rpx;
					}
				}
				.submit {
					width: 120rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #FF8151;
					border-radius: 20rpx;
					border: 1rpx solid #FF8151;
					text-align: center;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-top: 10rpx;
				}
			}
			.des {
				font-size: 24rpx;
				color: #CCCCCC;
				line-height: 36rpx;
			}
		}
		.writing-content {
			margin-top: 56rpx;
			.title {
				text-align: center;
				font-size: 36rpx;
				padding: 16rpx 0;
				border-bottom: 1px solid #D8D8D8;
			}
			.content {
				padding: 22rpx 0;
				font-size: 28rpx;
				color: #333333;
				line-height: 42rpx;
				height: 460rpx;
			}
		}
	}
</style>
